<html lang="zh-cn">
<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="">
	<meta name="author" content="Guo Yinxin">

	<link rel="shortcut icon" href="icons/monitor.ico">

	<!-- 框架皮肤 -->
	<link href="css/flat-ui.css" rel="stylesheet">
	<link href="css/font-awesome.min.css" rel="stylesheet">
	<title>海洋观测系统运行状态监控</title>

	<!-- Bootstrap core CSS -->
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<!-- Slider bar hover color set -->
	<link href="css/bootstrap.css" rel="stylesheet">

	<!-- Dashboard  -->
	<link href="css/dashboard.css" rel="stylesheet">

	<!-- Modal -->
	<link href="css/bootstrap-modal.css" rel="stylesheet">
	<link href="css/bootstrap-responsive.css" rel="stylesheet">

	<!-- Kendo UI CSS -->
	<link href="style/kendo.dataviz.min.css" rel="stylesheet" />
	<link href="style/kendo.dataviz.default.min.css" rel="stylesheet" />
	<link href="style/kendo.default.min.css" rel="stylesheet">
	<link href="style/kendo.common.min.css" rel="stylesheet">


	<!-- Modal CSS -->
	<style type="text/css">
		body.modal-open,
		.modal-open .navbar-fixed-top,
		.modal-open .navbar-fixed-bottom
		{
			margin-right: 0;
		}
		.modal
		{
			left: 50%;
			bottom: auto;
			right: auto;
			padding: 0;
			width: 500px;
			margin-left: -250px;
			background-color: #ffffff;
			border: 1px solid #999999;
			border: 1px solid rgba(0, 0, 0, 0.2);
			border-radius: 6px;
			-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
			box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
			background-clip: padding-box;
		}
		.modal.container
		{
			max-width: none;
		}
	</style>
</head>

<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
	<div class="container-fluid" style="background-color:#0A64A4">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="brand" href="index.html" style="padding-left:20px">
				<img alt="监控icon" src="icons/monitor_48.png">
				<span style="font-size:26px;color:#ffffff;vertical-align:middle">海洋观测系统运行状态监控</span>
			</a>
		</div>

		<div class="navbar-collapse collapse">
			<ul class="nav navbar-nav navbar-right">
				<!--<li><a id="setting" href="#responsive" data-toggle="modal"><span class="icon-cogs"></span>&nbsp;设置</a></li>-->
				<li><a id="message" href="#responsive" data-toggle="modal"><span class="icon-envelope"></span>&nbsp;消息</a></li>
				<li><a id="about" href="#responsive" data-toggle="modal"><span class="icon-question-sign"></span>&nbsp;关于</a>
				</li>
				<li class="dropdown">
					<a href="#user" class="dropdown-toggle" data-toggle="dropdown">
						<span class="icon-user"></span>
						<span id="loginName">&nbsp;用户</span>
						<b class="caret"></b>
					</a>
					<ul class="dropdown-menu">
						<li><a id="account" href="#responsive" data-toggle="modal"><i class="icon-user"></i>&nbsp;账户</a></li>
						<li class="divider"></li>
						<li><a href="login.html" onclick="logout()"><i class="icon-off"></i>&nbsp;退出</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
</div>

<div class="container-fluid">
	<div class="row">
		<div class="col-xs-2 col-sm-2 col-md-2 col-lg-1 sidebar" style="background-color:#2E3538;font-family:'微软雅黑'">
			<ul class="nav nav-sidebar">
				<li>
					<span class="glow"></span>
					<a href="index.html">
						<span class="icon-dashboard icon-2x" style="color:#dfdfdf;"></span>
						<span style="font-size:18px; color:#dfdfdf;">仪表盘</span>
					</a>
				</li>
			</ul>
			<ul class="nav nav-sidebar">
				<li>
					<span class="glow"></span>
					<a href="file.html">
						<span class="icon-file-text icon-2x" style="color:#dfdfdf"></span>
						<span style="font-size:18px; color:#dfdfdf;">&nbsp;文件</span>
					</a>
				</li>
			</ul>
			<ul class="nav nav-sidebar">
				<li>
					<span class="glow"></span>
					<a href="server.html">
						<span class="icon-tasks icon-2x" style="color:#dfdfdf"></span>
						<span style="font-size:18px; color:#dfdfdf;">服务器</span>
					</a>
				</li>
			</ul>
			<ul class="nav nav-sidebar">
				<li>
					<span class="glow"></span>
					<a href="cpu.html">
						<span class="icon-circle-blank icon-2x" style="color:#dfdfdf"></span>
						<span style="font-size:18px; color:#dfdfdf">&nbsp;CPU</span>
					</a>
				</li>
			</ul>
			<ul class="nav nav-sidebar">
				<li>
					<span class="glow"></span>
					<a href="memory.html">
						<span class="icon-ticket icon-2x" style="color:#dfdfdf"></span>
						<span style="font-size:18px; color:#dfdfdf">内存</span>
					</a>
				</li>
			</ul>
			<ul class="nav nav-sidebar">
				<li>
					<span class="glow"></span>
					<a href="disk.html">
						<span class="icon-hdd icon-2x" style="color:#dfdfdf"></span>
						<span style="font-size:18px; color:#dfdfdf">&nbsp;磁盘</span>
					</a>
				</li>
			</ul>
			<ul class="nav nav-sidebar">
				<li>
					<span class="glow"></span>
					<a href="network.html">
						<span class="icon-globe icon-2x" style="color:#dfdfdf"></span>
						<span style="font-size:18px; color:#dfdfdf;">&nbsp;网络</span>
					</a>
				</li>
			</ul>
			<ul class="nav nav-sidebar">
				<li class="active">
					<span class="glow"></span>
					<a href="database.html">
						<span class="icon-calendar icon-2x" style="color:#dfdfdf"></span>
						<span style="font-size:18px; color:#dfdfdf">数据库</span>
					</a>
				</li>
			</ul>
		</div>

		<div class="col-sm-10 col-sm-offset-2 col-md-10 col-md-offset-2 col-lg-11 col-lg-offset-1 main">
			<ul class="breadcrumb">
				<li><a href="index.html">首页</a>
				</li>
				<li class="active">数据库
				</li>
			</ul>
			<div class="row ">
				<div id="main_div_chart_u">
					<div id="database_container" class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="padding-right:0px;"></div>
				</div>

			</div>
		</div>

	</div>
</div>
<hr>
<footer class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="margin-bottom:20px">
	<p style="text-align:center">Copyright © 2014 ShangHai Ocean University * Institute For Digital Ocean . All Rights
		Reserved.</p>
</footer>
</div>

<!-- Modal Definitions (tabbed over for <pre>) -->
<div id="responsive" class="modal fade" tabindex="-1" data-width="760" style="display: none;">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		<h4 id="responsiveTitle" class="modal-title" style="text-align:center;font-weight:bold;"></h4>
	</div>
	<div class="modal-body">
		<div class="row">
			<div id="responsiveBody">// class="col-md-offset-1 col-md-10">

			</div>
		</div>
	</div>
	<div class="modal-footer">
		<button type="button" data-dismiss="modal" class="btn btn-default">关闭</button>
		<!--<button type="button" class="btn btn-primary">Save changes</button>-->
	</div>
</div>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>

<!-- Modal JS -->
<script src="js/bootstrap-modalmanager.js"></script>
<script src="js/bootstrap-modal.js"></script>

<!-- Kendo UI -->
<script src="js/kendo.dataviz.min.js"></script>
<script src="js/kendo.web.min.js"></script>


<style scoped>
	.gauge-container
	{
		/*background: transparent url("images/content/dataviz/gauge/gauge-container.png") no-repeat;*/
		width: 250px;
		height: 250px;
		text-align: center;
		margin: 0 0 30px 50px;
	}
	.gauge
	{
		width: 204px;
		height: 204px;
		margin: 0 auto 0;
	}
	.chart
	{
		width: 350px;
		height: 350px;
	}
	#uu
	{
		width: 550px;
		height: 550px;
		float: left;
	}
</style>

<style>
	div.center, p.center, img.center, button.center
	{
		margin-left: auto !important;
		margin-right: auto !important;
		float: none !important;
		display: block;
		text-align: center;
	}
</style>

<script>
	//全局变量声明
	//Server URL
	//    var serverURL = "http://192.168.182.48:8080/api/sql?sql=";
	var serverURL = "http://202.121.66.51:8083/api/sql?sql=";

	//Responsive <a> 的点击监听事件
	$('a').click(function (e)
	{
		var title = document.getElementById("responsiveTitle");
		var body = document.getElementById("responsiveBody");
		while (body.childNodes.length)
		{
			body.removeChild(body.firstChild);
		}
		console.log(e.target.id);
		body.className = "col-md-offset-1 col-md-10";
//        var resp = document.getElementById("responsive");
//        resp.dataset.width = "760";
//        console.log("target ID:"+e.target.id+"  "+ e.currentTarget);
		switch (e.target.id)
		{
			case "about":
				title.innerText = "关于“海洋观测系统运行状态监控”";
				bodyAbout(body);
				break;
			case "message":
				title.innerText = "消息";
				bodyMessage(body);
				break;
			case "setting":
				title.innerText = "设置";
				bodySetting(body);
				break;
			case "account":
				title.innerText = "账户信息";
				bodyAccount(body);
				break;
			default :
				title.innerText = "Responsive Title";
		}
	});

	// About Body function
	function bodyAbout(fatherDiv)
	{
		var h4 = document.createElement("h4");
		h4.innerText = "介绍：";
		fatherDiv.appendChild(h4);
		var para = document.createElement("p");
		para.innerText = "海洋观测系统运行状态监控是海洋公益性行业科研专项项目“海洋观测系统运行状态监控技术研究与示范”的子项目之一。" +
				"        该系统由国家海洋局东海分局信息中心与上海海洋大学合作研究开发，研发成员有：郭颖新，季丽伟，韦躐晟等。";
		fatherDiv.appendChild(para);
	}
	// Message Body function
	function bodyMessage(fatherDiv)
	{
		var messageDiv = document.createElement("div");
		messageDiv.id = "messageDiv";
		fatherDiv.className = "col-md-12";
		fatherDiv.appendChild(messageDiv);

		var messageInfoSql = "select * from messageInfo group by ID desc limit 200";
		var messageUrl = serverURL + messageInfoSql;
		$.ajax({
			url: messageUrl, //请求的url地址
			dataType: "json", //返回格式为json
			async: true, //请求是否异步，默认为异步，这也是ajax重要特性
			//data:{"id":"value"},    //参数值
			type: "GET", //请求方式
			beforeSend: function ()
			{
				//请求前的处理
			},
			success: function (req)
			{
				//请求成功时处理
				for (var i in req)
				{
					req[i].DateTime = req[i].DateTime.replace("T", " ");
				}
				$("#messageDiv").kendoGrid({
					dataSource: {
						data: req,
						pageSize: 10
					},
					pageable: {
						refresh: true,
						pageSizes: true,
						buttonCount: 5
					},
					navigatable: true,
//                    height: 430,
					scrollable: {
						virtual: true
					},
					sortable: true,
					columns: [{
						field: "ID",
						title: "ID",
						width: 10
					}, {
						field: "ServerID",
						title: "Server",
						width: 20
					}, {
						field: "Aspect",
						title: "方面",
						width: 30
					}, {
						field: "Content",
						title: "内容",
						width: 80
					}, {
						field: "DateTime",
						title: "时间",
						width: 45
					}]
				});
			},
			error: function ()
			{
				//请求出错处理
			}
		});
	}
	// Setting Body function
	function bodySetting(fatherDiv)
	{

	}
	// Account Body function
	function bodyAccount(fatherDiv)
	{
		var userCount = document.createElement("div");
		userCount.id = "userCount";
		fatherDiv.appendChild(userCount);

		var userInfoSql = "select * from user where UserName=\"" + getCookie("loginUser") + "\"";
		var userUrl = serverURL + userInfoSql;
		$.ajax({
			url: userUrl, //请求的url地址
			dataType: "json", //返回格式为json
			async: true, //请求是否异步，默认为异步，这也是ajax重要特性
			//data:{"id":"value"},    //参数值
			type: "GET", //请求方式
			beforeSend: function ()
			{
				//请求前的处理
			},
			success: function (req)
			{
				//请求成功时处理
				$("#userCount").kendoGrid({
					dataSource: {
						data: req
					},
					navigatable: true,
//                    height: 430,
					scrollable: {
						virtual: true
					},
					sortable: true,
					columns: [{
						field: "UserName",
						title: "用户名",
						width: 50
					}, {
						field: "Passwords",
						title: "密码",
						width: 50
					}, {
						field: "Level",
						title: "权限等级",
						width: 40
					}, {
						field: "RegistTime",
						title: "注册时间",
						width: 80
					}, {
						field: "ID",
						title: "ID",
						width: 20
					}]
				});
			},
			complete: function ()
			{
				//请求完成的处理
			},
			error: function ()
			{
				//请求出错处理
			}
		});
	}
	// Get Cookie Function
	function getCookie(key)
	{
		var arr = document.cookie.match(new RegExp("(^|)" + key + "=([^;]*)(;|$)"));
		if (arr != null)
		{
			return unescape(arr[2]);
		}
		return null;
	}
	// Delete Cookie
	function deleteCookie(key)
	{
		var exp = new Date();
		exp.setTime(exp.getTime() - 1);
		var cVal = getCookie(key);
		if (cVal != null)
		{
			document.cookie = key + "=" + cVal + ";expires=" + exp.toGMTString();
		}
	}
	// Logout function
	function logout()
	{
		deleteCookie("loginUser");
	}
	$(document).ready(function ()
	{
		if (!getCookie("loginUser"))
		{
			window.location = "login.html";
		}
		else
		{
			//Init username from cookie
			document.getElementById("loginName").innerText = " " + getCookie("loginUser");
		}
	})
</script>

<script>
	var resourceurl = "http://202.121.66.51:8083/api/sql";
	var serversql = "select * from(select b.Number,b.DatabaseID,b.ServerID, a.ServerName, a.ServerIP,b.IsConnected,b.CPUused,b.MemoryUsed,b.DataTime from server as a,databaseinfo as b where b.ServerID=a.ServerID order by DataTime desc) as temp  group by ServerID";
	var databasesql = "select * from databaseinfo order by datatime desc";

	function create_main_chart(ServerData)
	{
		if (ServerData.length != 0)
		{
			document.getElementById("main_div_chart_u").className = "col-xs-12 col-sm-12 col-md-12 col-lg-12 ";
			document.getElementById("database_container").className = "col-xs-12 col-sm-12 col-md-12 col-lg-12 ";

			for (var i = 0; i < ServerData.length; i++)
			{
				var chart_main_div = document.createElement("div");
				chart_main_div.className = "col-xs-12 col-sm-12 col-md-12 col-lg-12 panel panel-default center";
				chart_main_div.id = "chart_main_div" + i;
				chart_main_div.style.paddingRight = 0;
				$("#database_container").append(chart_main_div);

				var SerName_div = document.createElement("h4");
				SerName_div.innerText = "服务器：" + ServerData[i].SerName;
				SerName_div.className = "panel-heading";
				chart_main_div.appendChild(SerName_div);

				var IP_div = document.createElement("h4");
				IP_div.className = "panel-body";
				IP_div.innerText = "IP地址：" + ServerData[i].SerIP;
				chart_main_div.appendChild(IP_div);

				//CPUINFO   ----------------
				var CPUmain_div = document.createElement("div");
				CPUmain_div.className = "col-xs-4 col-sm-4 col-md-4 col-lg-4  panel panel-default";
				chart_main_div.appendChild(CPUmain_div);
				chart_main_div.style.paddingLeft = 0;


				var Chart_CPU_div = document.createElement("div");
				Chart_CPU_div.id = "CPUChart" + i;
				Chart_CPU_div.className = "gauge";
				// Chart_CPU_div.className="col-xs-6 col-sm-6 col-md-6 col-lg-6 placeholder";
				CPUmain_div.appendChild(Chart_CPU_div);

				var cpudivName = document.createElement("h5");
				cpudivName.className = "panel-heading";
				cpudivName.id = "cpudivName" + i;
				cpudivName.innerText = "CPU使用率: " + ServerData[i].CPUUseage + "%";
				CPUmain_div.appendChild(cpudivName);
				//document.getElementById("chart_main_div"+i).className = "col-xs-6 col-sm-6 col-md-6 col-lg-6 placeholder panel panel-default";
				$("#CPUChart" + i).height(220);
				$("#CPUChart" + i).width(220);
				$("#CPUChart" + i).kendoRadialGauge({
					theme: "metro",
					title: {
						position: "top",
						text: "内存使用率"
					},
					pointer: {
						value: ServerData[i].CPUUseage
					},
					transitions: false,
					scale: {
						//minorUnit: 1,
						startAngle: -30,
						endAngle: 210,
						max: 100,
						labels: {
							position: "inside",// "outside"
							visible: true

						},
						ranges: [
							{
								from: 45,
								to: 70,
								color: "#ffc700"
							}, {
								from: 70,
								to: 85,
								color: "#ff7a00"
							}, {
								from: 85,
								to: 100,
								color: "#c20000"
							}
						]
					}
				});

				//MEMORYINFO------
				var Chart_Memory_div = document.createElement("div");
				Chart_Memory_div.id = "MemoryChart" + i;
				Chart_Memory_div.className = "gauge";
				// Chart_CPU_div.className="col-xs-6 col-sm-6 col-md-6 col-lg-6 placeholder";
				CPUmain_div.appendChild(Chart_Memory_div);

				var memorydivName = document.createElement("h5");
				memorydivName.className = "panel-heading ";
				memorydivName.id = "memoryName" + i;
				memorydivName.innerText = "内存使用率: " + ServerData[i].MemoryUseage + "%";
				CPUmain_div.appendChild(memorydivName);
				$("#MemoryChart" + i).height(300);
				$("#MemoryChart" + i).width(300);
				$("#MemoryChart" + i).kendoChart({
					theme: "metro",
					title: {
						position: "top",
						text: "内存使用率"
					},
					legend: {
						position: "bottom"
					},
					chartArea: {
						background: ""
					},
					seriesDefaults: {
						labels: {
							visible: true,
							background: "transparent",
							template: "#= category #: #= value#%",
							position: "outsideEnd",
							distance: 15
						}
					},
					series: [{
						type: "pie",
						size: 35,
						startAngle: 90,
						data: [{
							category: "Used",
							value: ServerData[i].MemoryUseage,
							color: "#42a7ff"
						}, {
							category: "Left",
							explode: "true",
							value: 100 - (ServerData[i].MemoryUseage),
							color: "#666666"
						}
						]
					}],
					tooltip: {
						visible: true,
						template: "#= category #: #= value#%"
					}
				});

				var DATABASEmain_div = document.createElement("div");        //database
				DATABASEmain_div.className = "col-xs-8 col-sm-8 col-md-8 col-lg-8";
				chart_main_div.appendChild(DATABASEmain_div);
				DATABASEmain_div.style.paddingRight = 0;
				DATABASEmain_div.style.marginRight = 0;

				var database_div = document.createElement("div");
				database_div.id = "database_chart" + i;
				DATABASEmain_div.appendChild(database_div);
				$("#database_chart" + i).height(630);
				$("#database_chart" + i).kendoGrid({
					columns: [
						{
							field: "FilePath_simple",
							title: "文件路径"
//                      attributes: {
//                        "class": "table-cell",
//                        style: "text-align: center; font-size: 14px" }
						},
						{field: "FileSize", title: "文件大小(M)", width: 140, attributes: {style: "text-align: center"}},
						{field: "IsError", title: "文件状态", width: 120, attributes: {style: "text-align: center"}},
						//{ field: "ErrorLog"  ,title:"错误日志"},
						// { field: "ReviseTime" ,title:"修改时间",format: "{0: yyyy-MM-dd HH:mm:ss}" },
						{
							field: "DataTime",
							title: "时间",
							format: "{0: yyyy-MM-dd HH:mm:ss}",
							width: 180,
							attributes: {style: "text-align: center"}
						}
					],
					columnMenu: true,
					sortable: true,
					// editable: true,
					filterable: {
						extra: false
					},
					reorderable: true,
					resizable: true,
//                scrollable: false,
					/*navigatable: true,
					 selectable: true,*/
					//   height: 400,
					dataSource: ServerData[i].DataBaseInfo,
					detailTemplate: "<div>文件路径: #: FilePath #</div><div>状态: #: IsError #</div>",
					pageable: {
						pageSize: 15,
						pageSizes: [10, 15, 20],
						buttonCount: 4,
						refresh: true,
						messages: {
							display: " {0}-{1} of {2} items",
							empty: "No data",
							page: "Enter page",
							of: "of {0}",
							itemsPerPage: " ",
							first: "首页",
							last: "末页",
							next: "下一页",
							previous: "上一页",
							refresh: "刷新",
							morePages: "更多"
						}
					}

				});
			}
		}
		else
		{
			//  $("#database_container").append(chart_main_div);
			document.getElementById("main_div_chart_u").className = "col-xs-12 col-sm-12 col-md-12 col-lg-12  panel panel-danger";
			document.getElementById("database_container").className = "col-xs-12 col-sm-12 col-md-12 col-lg-12  panel-heading";
			document.getElementById("database_container").innerText = "NO DATA\n PLEASE MAKE SURE THE SERVER'S MONITOR APPLICATION IS OPENED \nTHEN REFRESH THIS WINDOW";
		}


	}
	function update_chart_data()
	{
		var serveraj_update = $.ajax({
			url: resourceurl,// 跳转到 action
			type: 'get',
			data: {sql: serversql},
			success: function (serdata)
			{
				var ServerData = [];
				for (var s = 0; s < serdata.length; s++)
				{
					var tempMemoryUsed = serdata[s].MemoryUsed;
					if (tempMemoryUsed == null)
					{
						tempMemoryUsed = 40;
					}
					var tempCPUUsed = serdata[s].CPUused;
					if (tempCPUUsed == null)
					{
						tempCPUUsed = 0;
					}
					ServerData[s] =
					{
						SerID: serdata[s].ServerID,
						SerIP: serdata[s].ServerIP,
						SerName: serdata[s].ServerName,
						MemoryUseage: tempMemoryUsed,
						CPUUseage: tempCPUUsed,
						DataBaseInfo: []
					};
				}

				var databaseaj = $.ajax({
					url: resourceurl,// 跳转到 action
					data: {sql: databasesql},
					type: 'get',
					//dataType:'json',
					success: function (databsedata)
					{
						for (var i = 0; i < databsedata.length; i++)
						{
							for (var s = 0; s < ServerData.length; s++)
							{
								if (ServerData[s].SerID == databsedata[i].ServerID)
								{
									var databsejson = {};
									$(databsejson).attr("FilePath", databsedata[i].FilePath);
									var file_lenth = 0;
									for (var l = 0; l < databsedata[i].FilePath.length; l++)
									{

										if ((databsedata[i].FilePath).substr(databsedata[i].FilePath.length - l, 1) != "\\")
										{
											file_lenth++;
										}
										else break;
									}
									$(databsejson).attr("FilePath_simple", (databsedata[i].FilePath).substr(databsedata[i].FilePath.length - (file_lenth - 1), file_lenth));
									$(databsejson).attr("FileSize", databsedata[i].FileSize);
									var tempvar = "";
									if (databsedata[i].IsError == "true")  tempvar = "异常";
									else tempvar = "正常";
									$(databsejson).attr("IsError", tempvar);//databsedata[i].IsError);
									$(databsejson).attr("ErrorLog", databsedata[i].ErrorLog);
									$(databsejson).attr("ReviseTime", new Date((databsedata[i].ReviseTime).substr(0, 10) + " " + (databsedata[i].ReviseTime).substr(11, 8)));
									$(databsejson).attr("DataTime", new Date((databsedata[i].DataTime).substr(0, 10) + " " + (databsedata[i].DataTime).substr(11, 8)));
									//$(databsejson).attr("DataTime",(databsedata[i].DataTime).substr(0, 10)+" "+(databsedata[i].DataTime).substr(11, 8));
									ServerData[s].DataBaseInfo.push(databsejson);
									break;
								}
							}
						}
						for (var i = 0; i < ServerData.length; i++)
						{
							if (ServerData.length != 0)
							{
								document.getElementById("main_div_chart_u").className = "col-xs-12 col-sm-12 col-md-12 col-lg-12 ";
								document.getElementById("database_container").className = "col-xs-12 col-sm-12 col-md-12 col-lg-12 ";
								// document.getElementById("database_container").innerText="";

								document.getElementById("cpudivName" + i).innerText = "CPU使用率: " + ServerData[i].CPUUseage + "%";    //更新CPU使用率表
								$("#CPUChart" + i).kendoRadialGauge({
									theme: "metro",
									title: {
										position: "top",
										text: "内存使用率"
									},
									pointer: {
										value: ServerData[i].CPUUseage
									},
									transitions: false,
									scale: {
										//minorUnit: 1,
										startAngle: -30,
										endAngle: 210,
										max: 100,
										labels: {
											position: "inside",// "outside"
											visible: true

										},
										ranges: [
											{
												from: 45,
												to: 70,
												color: "#ffc700"
											}, {
												from: 70,
												to: 85,
												color: "#ff7a00"
											}, {
												from: 85,
												to: 100,
												color: "#c20000"
											}
										]
									}
								});

								document.getElementById("memoryName" + i).innerText = "内存使用率: " + ServerData[i].MemoryUseage + "%";        //更新内存图表
								$("#MemoryChart" + i).kendoChart({
									theme: "metro",
									title: {
										position: "top",
										text: "内存使用率"
									},
									legend: {
										position: "bottom"
									},
									chartArea: {
										background: ""
									},
									seriesDefaults: {
										labels: {
											visible: true,
											background: "transparent",
											template: "#= category #: #= value#%",
											position: "outsideEnd",
											distance: 15
										}
									},
									series: [{
										type: "pie",
										size: 35,
										startAngle: 90,
										data: [{
											category: "Used",
											value: ServerData[i].MemoryUseage,
											color: "#42a7ff"
										}, {
											category: "Left",
											explode: "true",
											value: 100 - (ServerData[i].MemoryUseage),
											color: "#666666"
										}
										]
									}],
									tooltip: {
										visible: true,
										template: "#= category #: #= value#%"
									}
								});

								$("#database_chart" + i).kendoGrid({   //更新数据库信息表
									columns: [
										{
											field: "FilePath_simple",
											title: "文件路径"
//                      attributes: {
//                        "class": "table-cell",
//                        style: "text-align: center; font-size: 14px" }
										},
										{field: "FileSize", title: "文件大小(M)", width: 140, attributes: {style: "text-align: center"}},
										{field: "IsError", title: "文件状态", width: 120, attributes: {style: "text-align: center"}},
										//{ field: "ErrorLog"  ,title:"错误日志"},
										// { field: "ReviseTime" ,title:"修改时间",format: "{0: yyyy-MM-dd HH:mm:ss}" },
										{
											field: "DataTime",
											title: "时间",
											format: "{0: yyyy-MM-dd HH:mm:ss}",
											width: 180,
											attributes: {style: "text-align: center"}
										}
									],
									columnMenu: true,
									sortable: true,
									// editable: true,
									filterable: {
										extra: false
									},
									reorderable: true,
									resizable: true,
//                scrollable: false,
									/*navigatable: true,
									 selectable: true,*/
									//   height: 400,
									dataSource: ServerData[i].DataBaseInfo,
									detailTemplate: "<div>文件路径: #: FilePath #</div><div>状态: #: IsError #</div>",
									pageable: {
										pageSize: 15,
										pageSizes: [10, 15, 20],
										buttonCount: 4,
										refresh: true,
										messages: {
											display: " {0}-{1} of {2} items",
											empty: "No data",
											page: "Enter page",
											of: "of {0}",
											itemsPerPage: " ",
											first: "首页",
											last: "末页",
											next: "下一页",
											previous: "上一页",
											refresh: "刷新",
											morePages: "更多"
										}
									}
								});
							}
							else
							{
								document.getElementById("main_div_chart_u").className = "col-xs-12 col-sm-12 col-md-12 col-lg-12  panel panel-danger";
								document.getElementById("database_container").className = "col-xs-12 col-sm-12 col-md-12 col-lg-12  panel-heading";
								document.getElementById("database_container").innerText = "NO DATA\n PLEASE MAKE SURE THE SERVER'S MONITOR APPLICATION IS OPENED \nTHEN REFRESH THIS WINDOW";
							}
						}
					},
					error: function ()
					{
						// view("异常！");
						console.log("获取数据库信息！");
					}
				});

			},
			error: function ()
			{
				// view("异常！");
				console.log("获取数据库信息！");
			}

		});
		setTimeout("update_chart_data()", 10000);

	}

	$(document).ready(function ()
	{
		if (!getCookie("loginUser"))
		{
			window.location = "login.html";
		}
		else
		{
			var serveraj = $.ajax({
				url: resourceurl,// 跳转到 action
				type: 'get',
				data: {sql: serversql},
				success: function (serdata)
				{
					var ServerData = [];
					for (var s = 0; s < serdata.length; s++)
					{
						var tempMemoryUsed = serdata[s].MemoryUsed;
						if (tempMemoryUsed == null)
						{
							tempMemoryUsed = 40;
						}
						var tempCPUUsed = serdata[s].CPUused;
						if (tempCPUUsed == null)
						{
							tempCPUUsed = 0;
						}
						ServerData[s] =
						{
							SerID: serdata[s].ServerID,
							SerIP: serdata[s].ServerIP,
							SerName: serdata[s].ServerName,
							MemoryUseage: tempMemoryUsed,
							CPUUseage: tempCPUUsed,
							DataBaseInfo: []
						};
					}

					var databaseaj = $.ajax({
						url: resourceurl,// 跳转到 action
						data: {sql: databasesql},
						type: 'get',
						//dataType:'json',
						success: function (databsedata)
						{
							for (var i = 0; i < databsedata.length; i++)
							{
								for (var s = 0; s < ServerData.length; s++)
								{
									if (ServerData[s].SerID == databsedata[i].ServerID)
									{
										var databsejson = {};
										$(databsejson).attr("FilePath", databsedata[i].FilePath);
										var file_lenth = 0;
										for (var l = 0; l < databsedata[i].FilePath.length; l++)
										{

											if ((databsedata[i].FilePath).substr(databsedata[i].FilePath.length - l, 1) != "\\")
											{
												file_lenth++;
											}
											else break;
										}
										$(databsejson).attr("FilePath_simple", (databsedata[i].FilePath).substr(databsedata[i].FilePath.length - (file_lenth - 1), file_lenth));
										$(databsejson).attr("FileSize", databsedata[i].FileSize);
										var tempvar = "";
										if (databsedata[i].IsError == "true")  tempvar = "异常";
										else tempvar = "正常";
										$(databsejson).attr("IsError", tempvar);//databsedata[i].IsError);
										$(databsejson).attr("ErrorLog", databsedata[i].ErrorLog);
										$(databsejson).attr("ReviseTime", new Date((databsedata[i].ReviseTime).substr(0, 10) + " " + (databsedata[i].ReviseTime).substr(11, 8)));
										$(databsejson).attr("DataTime", new Date((databsedata[i].DataTime).substr(0, 10) + " " + (databsedata[i].DataTime).substr(11, 8)));
										//$(databsejson).attr("DataTime",(databsedata[i].DataTime).substr(0, 10)+" "+(databsedata[i].DataTime).substr(11, 8));
										ServerData[s].DataBaseInfo.push(databsejson);
										break;
									}
								}
							}
							create_main_chart(ServerData);
							update_chart_data();

							//  createMemoryChart(ServerData);
							//  updateData();

						},
						error: function ()
						{
							// view("异常！");
							console.log("获取数据库信息异常！");
						}
					});

				},
				error: function ()
				{
					// view("异常！");
					console.log("获取数据库信息异常！");
				}

			});
		}
	})
</script>


</body>
</html>
